
<script lang="ts" setup>
import { computed } from 'vue';
import { useRouteStore } from '@/stores/routeStore';
import { useRouter } from 'vue-router';
import { useInitData } from "@/stores/initStore";
const router = useRouter();
const initData = useInitData();

const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath);
};
const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath);
    router.push(key);
};

const handleOpenChange = (v:boolean) => {
    initData.setCollapse(v);
}
console.log('isCollapse', initData.isCollapse)

// 从 Pinia store 获取路由数据
const { routes } = useRouteStore();
const filteredRoutes = computed(() => routes.filter((route) => route.path !== '/notFound'));
</script>

<template>
    <div class="tac">
        <el-menu default-active="/daily" class="el-menu-vertical-demo" background-color="#e7f1fb" @open="handleOpen"
            @close="handleClose" @select="handleSelect" :collapse="initData.isCollapse">
            <template v-for="(route, index) in filteredRoutes" :key="route.path">
                <el-sub-menu v-if="route.children" :index="index.toString()">
                    <template v-slot:title>
                        <Location class="icon-style" />
                         <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
                        <span slot="title">{{ route.name }}</span>
                    </template>
                    <el-menu-item v-for="(child, childIndex) in route.children" :index="`${index}-${childIndex}`"
                        :key="child.path">
                        <!-- <router-link :to="child.path">
                            <Location class="icon-style"/>
                            <span>{{ child.name }}</span>
                        </router-link> -->
                        <template v-slot:title>
                            <Location class="icon-style" />
                            <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
                            <span slot="title"> {{ route.name }} </span>
                        </template>
                    </el-menu-item>
                </el-sub-menu>
                <el-menu-item v-else :index="route.path">
                    <el-icon>
                        <Location class="icon-style" />
                    </el-icon>
                    <template v-slot:title>
                        <span> {{ route.name }} </span>
                    </template>
                </el-menu-item>
            </template>
        </el-menu>
        <div class="radio-open">
            <i v-if="!initData.isCollapse" @click="handleOpenChange(true)" style="color: blue;">
                收起
            </i>
            <i v-if="initData.isCollapse" @click="handleOpenChange(false)" style="color: blue;">
                展开
            </i> 
        </div>
    </div>
</template>

<style>
.tac {
    width: 100%;
    height: 100%;
    position: relative;
}

.radio-open {
    position: absolute;
    bottom: 10px;
    left: 10px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 160px;
    /* min-height: 400px; */
}

.el-menu-vertical-demo {
    height: 100%;
}

.icon-style {
    width: 20px;
    margin-right: 5px;
}
</style>
